import "@/style/login/index.css"
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input, type FormProps } from 'antd';
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { apiReqs } from "@/api";
function Login(_props: any) {
    // 表单
    const [_formData, setFormData] = useState({
        username: '',
        password: '',
        remember: false,
    });

    // 值改变时
    const formData = { username: '', password: '', remember: false }
    const onValuesChange = (_changedValues: any, allValues: any) => {
        setFormData(allValues)
    }
    type FieldType = {
        username?: string;
        password?: string;
        remember?: boolean;
    }
    // 提交通过验证时
    const onFinish: FormProps<FieldType>['onFinish'] = (_values) => {
        apiReqs.signIn({
            data: {
                username: formData.username,
                password: formData.password,
                remember: formData.remember
            },
            success: (res: any) => {
                console.log(res)
                navigate('/home')

            }
        })

    };
    // 提交没通过验证时
    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    // 跳转
    const navigate = useNavigate()
    return (
        <div className='fatherBox'>
            <span className="title">ZheKo系统</span>
            <Form name='basic' labelCol={{ span: 8 }} style={{ maxWidth: 600 }} onValuesChange={onValuesChange} onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete='off'>
                <Form.Item<FieldType> label='' name='username' rules={[{ required: true, message: '请输入用户名' }]}>
                    <Input value={formData.username} prefix={<UserOutlined />} placeholder="请输入用户名"></Input>
                </Form.Item>
                <Form.Item<FieldType> label='' name='password' rules={[{ required: true, message: '请输入密码' }]}>
                    <Input.Password value={formData.password} prefix={<LockOutlined />} placeholder="请输入密码"></Input.Password>
                </Form.Item>
                <Form.Item<FieldType> label="" name="remember" valuePropName="checked">
                    <Checkbox value={formData.remember} className="rememberCheck">记住密码</Checkbox>
                </Form.Item>
                <Form.Item label="">
                    <Button className="login-button" type="primary" htmlType="submit">登录</Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default Login;